<template>
    <div class="weekend">
        <div class="weekend-title">周末去哪儿</div>
        <ul>
            <li class="weekend-item border-bottom" v-for="item of weekendList" :key="item.id">
                <div class="item-img-wrapper">
                    <img :src="item.imgUrl" class="item-img" alt="">
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        name : 'HomeRecommend',
        props : {
            weekendList : Array
        }
    }
</script>
<style scoped lang="scss" type="text/scss">
    @import "~css/theme.scss";
    @import "~css/mixins.scss";
    .weekend{
        .weekend-title{
            line-height:.8rem;
            background:#eee;
            text-indent:.2rem;
        }
        .item-img-wrapper{
            overflow:hidden;
            height:0;
            padding-bottom:37.09%;
            .item-img{
                width:100%;
                padding:.1rem;
            }
        }
        .item-info{
            padding:.1rem;
            .item-title{
                line-height:.54rem;
                font-size:.32rem;
            }
            .item-desc{
                line-height:.4rem;
                color:#ccc;
                @include ellipsis;
            }
        }
    }
</style>